import { Button, Switch, Tooltip } from 'antd';
import '@/common/pageLayout.less';
import pageStyles from '@/common/pageLayout.less';
import MyIcon from '@/components/MyIcon';
import { departmentAPI } from '@/pages/SystemController/DepartmentController/type';
import { EyeOutlined, EditOutlined } from '@ant-design/icons';

const Operation = (permissions: Record<string, any>, clickFnc: departmentAPI.IOperationClick, record?: Record<string, any>) => {
  let operationArray = [];

  const Edit =
    record && record?.id && record?.isOpen == 1 && permissions['/departmentController/edit'] ? (
      <Button
        className="manageBtntTxtStyle"
        onClick={() => {
          clickFnc?.onEdit(record);
        }}
        type={'link'}
        size={'small'}
        icon={<EditOutlined />}
        key={record?.id + '-edit'}
      >
        编辑
      </Button>
    ) : (
      <></>
    );

  const View =
    record?.id && permissions['/departmentController/getDepartmentByID/{id}'] ? (
      <Button
        className="manageBtntTxtStyle"
        onClick={() => {
          clickFnc?.onView(record);
        }}
        type={'link'}
        size={'small'}
        icon={<EyeOutlined />}
        key={record?.id + '-View'}
      >
        查看
      </Button>
    ) : (
      <></>
    );

  operationArray = [View, Edit];

  return operationArray;
};

const getColumns: any = (searchValue: string, permissions: Record<string, any>, clickFnc: departmentAPI.IOperationClick) => {
  return [
    {
      title: '机构名称',
      dataIndex: 'name',
      key: 'name',
      visible: true,
      width: 260,
      fixed: 'left',
      unDrag: true,
      ellipsis: {
        showTitle: true,
      },
      render: (text: string, record: Record<string, any>) => {
        const index = text ? text.indexOf(searchValue) : -1;
        const beforeStr = text ? text.substr(0, index) : '';
        const afterStr = text ? text.substr(index + searchValue.length) : '';
        const title =
          index > -1 && searchValue != '' ? (
            <span>
              {beforeStr}
              <span style={{ color: '#f50' }}>{searchValue}</span>
              {afterStr}
            </span>
          ) : (
            <span>{text}</span>
          );
        return (
          <Tooltip title={title} placement="top">
            <span className={pageStyles['over-flow-hidden']} style={{ maxWidth: '100%' }} id={record?.id}>
              {record?.category == 0 ? <MyIcon type={'icon-bank'} /> : <MyIcon type={'icon-cluster'} />}
              &nbsp;
              {title}
            </span>
          </Tooltip>
        );
      },
    },
    {
      title: '机构类型',
      dataIndex: 'category',
      key: 'category',
      visible: true,
      width: 120,
      render: (_text: string, record: Record<string, any>) => {
        let categoryName = '';
        if (record?.category == 0) {
          categoryName = '单位';
        } else if (record?.category == 1) {
          categoryName = '部门';
        }
        return (
          <>
            {/* <Tooltip title={categoryName}> */}
            <span className={pageStyles['over-flow-hidden']}>{categoryName ?? '--'}</span>
            {/* </Tooltip> */}
          </>
        );
      },
    },
    {
      title: '是否科研机构',
      dataIndex: 'deptFlag',
      key: 'deptFlag',
      visible: true,
      width: 120,
      render: (_text: string, record: Record<string, any>) => {
        let isKy = '';
        if (record?.deptFlag == 0) {
          isKy = '否';
        } else if (record?.deptFlag == 1) {
          isKy = '是';
        }
        return (
          <>
            {/* <Tooltip title={categoryName}> */}
            <span className={pageStyles['over-flow-hidden']}>{isKy ?? '--'}</span>
            {/* </Tooltip> */}
          </>
        );
      },
    },
    {
      title: '机构类别',
      dataIndex: 'deptTypeName',
      key: 'deptTypeName',
      visible: false,
      width: 120,
      render: (text: string) => {
        let typeName = text ? text.split('||')[0] : '';
        let fontColor = '';
        if (text && text.split('||').length > 1) {
          fontColor = text.split('||')[1];
        }
        return (
          <>
            <Tooltip title={typeName} placement="top">
              <span className={pageStyles['over-flow-hidden']} style={{ color: fontColor }}>
                {typeName || '--'}
              </span>
            </Tooltip>
          </>
        );
      },
    },
    {
      title: '简码',
      dataIndex: 'shortCode',
      key: 'shortCode',
      visible: true,
      width: 100,
      render: (text: string) => {
        return (
          <>
            <Tooltip title={text} placement="top">
              <span className={pageStyles['over-flow-hidden']}>{text ?? '--'}</span>
            </Tooltip>
          </>
        );
      },
    },
    {
      title: '分管领导',
      dataIndex: 'dutyPositionName',
      key: 'dutyPositionName',
      visible: true,
      width: 120,
      render: (text) => {
        return (
          <>
            <Tooltip title={text} placement="top">
              <span className={pageStyles['over-flow-hidden']}>{text ?? '--'}</span>
            </Tooltip>
          </>
        );
      },
    },
    {
      title: '行政区域',
      dataIndex: 'provinceName',
      key: 'provinceName',
      visible: false,
      width: 180,
      render: (_text: string, record: Record<string, any>) => {
        let newText =
          (record.provinceName ? record.provinceName : '') +
          (record.cityName ? ` / ${record.cityName}` : '') +
          (record.countyName ? ` / ${record.countyName}` : '');
        return (
          <>
            <Tooltip title={newText} placement="top">
              <span
                className={pageStyles['over-flow-hidden']}
                // style={{ maxWidth: 150 }}
              >
                {newText ?? '--'}
              </span>
            </Tooltip>
          </>
        );
      },
    },
    // {
    //   title: '所在市区',
    //   dataIndex: 'cityName',
    //   key: 'cityName',
    //   visible: true,
    //   width: 100,
    //   render: (text: string, record: Record<string, any>) => {
    //     return (
    //       <>
    //         {text ?? '--'}
    //       </>
    //     );
    //   },
    // },
    // {
    //   title: '所在乡镇',
    //   dataIndex: 'countyName',
    //   key: 'countyName',
    //   visible: true,
    //   width: 100,
    //   render: (text: string, record: Record<string, any>) => {
    //     return (
    //       <>
    //         {text ?? '--'}
    //       </>
    //     );
    //   },
    // },
    {
      title: '状态',
      dataIndex: 'isOpen',
      key: 'isOpen',
      visible: true,
      width: 110,
      render: (text: string, record: Record<string, any>) => {
        return (
          <>
            <Switch
              checkedChildren="启用"
              unCheckedChildren="禁用"
              // defaultChecked={text == '1' ? true : false}
              checked={text == '1' ? true : false}
              onChange={(checked: boolean, event: any) => {
                clickFnc?.onIsOpen(checked, event, record);
              }}
              disabled={permissions['/departmentController/modifyState'] && record?.pID ? false : true}
            />
          </>
        );
      },
    },
    {
      title: '排序',
      dataIndex: 'seq',
      key: 'seq',
      visible: false,
      width: 100,
      render: (text: string) => {
        return <span>{text ?? '--'}</span>;
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 150,
      visible: false,
      render: (text: string) => {
        return (
          <>
            <Tooltip title={text} placement="top">
              <span
                className={pageStyles['over-flow-hidden']}
                // style={{ maxWidth: '100px' }}
              >
                {text ?? '--'}
              </span>
            </Tooltip>
          </>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      visible: true,
      width: 140,
      unDrag: true,
      fixed: 'right',
      render: (_text: string, record: any) => {
        return (
          <div
            style={{
              display: 'flex',
            }}
          >
            {Operation(permissions, clickFnc, record)}
          </div>
        );
      },
    },
  ];
};

export { getColumns };
